import { HTMLAttributes, SyntheticEvent } from 'react'
import { Resizable, ResizeCallbackData } from 'react-resizable'
/**
 *  ResizeableTitle component
 * @param props
 * @constructor
 */
export const ResizeableTitle = (
  props: HTMLAttributes<any> & {
    onResize: (e: SyntheticEvent, data: ResizeCallbackData) => void;
    width: number;
  }) => {
  const { onResize, width, ...restProps } = props
  console.log('resize--->',props)
  if (!width) {
    return <th {...restProps} />
  }

  return (
    <Resizable
      width={width}
      height={0}
      handle={
        <span
          className="react-resizable-handle"
          onClick={(e) => {
            console.log('resize handle click')
            e.stopPropagation()
          }}
        />
      }
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
    >
      <th {...restProps} />
    </Resizable>
  )
}
